<template>
  <!-- 文章的菜单 -->
  <article-menu-header v-model="problem.title"
                       title="请输入题目标题"
                       @draftHandler="draftHandler"
                       @releaseHandler="releaseHandler"
  />
  <!-- 题目的标签  -->
  <div class="background-block">
    <el-button link>标签：<input-tag-list v-model="problem.labels"/></el-button>
    <br/>
    <el-button link>难度等级：<input-rate v-model="problem.difficultyLevel"/> </el-button>
  </div>

  <!-- 题目内容 -->
  <div>
    <el-button size="large" link>题目内容</el-button>
    <hr/>
    <markdown-editor v-model="problemContent"/>
  </div>

  <!-- 测试样例 -->
  <div>
    <el-button size="large" link>题目中用于展示的测试样例</el-button>
    <hr/>
    <!-- 测试样例输入表单 -->
    <article-code-test-case add-button="添加测试样例" v-model="testSample"/>
  </div>

  <!-- 测试代码 -->
  <div>
    <el-button size="large" link>测试代码</el-button>
    <hr/>
    <!-- 语言选择器 -->
    <div class="background-block">
      <select-lang v-model="commitCode.lang"/>
    </div>
    <!-- 代码 -->
    <CodemirrorEditor class="background-block" v-model="commitCode.code" :codeLang="commitCode.lang" :lang="'cpp'" :style="{ height: '500px', fontSize: '18px' }"></CodemirrorEditor>
  </div>

  <!-- 测试用例 -->
  <div>
    <el-button size="large" link>测试用例</el-button>
    <hr/>
    <article-code-test-case label-text="测试用例" add-button="添加测试用例" v-model="testCase" :has-tip="true"/>
  </div>
</template>

<script>
import MarkdownEditor from '@/components/markdown-editor/MarkdownEditor'
import { ref } from 'vue'
import CodemirrorEditor from '@/components/codemirror-editor/CodemirrorEditor'
import InputTagList from '@/components/input-tag-list/input-tag-list'
import InputRate from '@/components/input-rate/input-rate'
import SelectLang from '@/components/select-lang/select-lang'
import ArticleMenuHeader from '@/components/article-menu/header/article-menu-header'
import {
  problemRelease,
  problemRunTest, problemRunUserCode, problemSaveTestCase,
  problemSaveTestCode,
  problemSaveTestSample
} from '@/api/problem'
import ArticleCodeTestCase from '@/components/article-menu/test/article-code-test-case'
export default {
  name: 'question-releasing',
  components: { ArticleCodeTestCase, ArticleMenuHeader, SelectLang, InputRate, InputTagList, CodemirrorEditor, MarkdownEditor },
  setup () {
    return {
      problemContent: ref(''),
      problem: ref({
        title: '',
        commit_test_id: '',
        content: '',
        difficultyLevel: 1,
        labels: ''
      }),
      commitCode: ref({
        lang: '',
        code: '',
        problemId: 0
      }),
      testSample: ref({
        problemId: 0,
        testInOuts: [{
          input: '',
          output: '',
          tip: '',
          rank: ''
        }],
        time_limit: 0,
        memory_limit: 0,
        rank: ''
      }),
      testCase: ref({
        problemId: 0,
        testInOuts: [{
          input: '',
          output: '',
          tip: '',
          rank: ''
        }],
        time_limit: 0,
        memory_limit: 0,
        rank: ''
      }),
      problemTags: ref([]),
      inputTagValue: ref(''),
      inputTagVisible: ref(true),
      enableTag: ref(true)
    }
  },
  methods: {
    tagList (val) {
      console.log('releasing', val)
    },
    draftHandler () {

    },
    async releaseHandler () {
      let problemId = 0
      this.problem.content = this.problemContent + '\n---\n'
      const inOuts = this.testSample.testInOuts
      let testCaseToString = ''
      for (let i = 0; i < this.testSample.testInOuts.length; i++) {
        testCaseToString += `##### 输入样例${i + 1}:\n`
        testCaseToString += '``` in\n'
        testCaseToString += inOuts[i].input
        testCaseToString += '\n```\n'
        testCaseToString += `##### 输出样例${i + 1}:\n`
        testCaseToString += '``` out\n'
        testCaseToString += inOuts[i].output
        testCaseToString += '\n```\n'
      }
      this.problem.content += testCaseToString
      await problemRelease(this.problem).then((val) => {
        console.log('problemId ', val)
        problemId = val.data
      })
      if (problemId === 0) {
        return
      }
      this.commitCode.problemId = problemId
      await problemSaveTestCode(this.commitCode).then((val) => {
        console.log('保存题目测试代码', val)
      })
      this.testSample.problemId = problemId
      console.log(this.testSample)
      await problemSaveTestSample(this.testSample).then(value => {
        console.log('保存题目的测试样例', value)
      })
      this.testCase.problemId = problemId
      await problemSaveTestCase(this.testCase).then(value => {
        console.log('保存题目中的测试用例', value)
      })
      const runnerDto = {
        problemId: problemId,
        code: this.commitCode.code,
        lang: this.commitCode.lang
      }
      await problemRunTest(runnerDto).then(val => {
        console.log('运行测试代码', val)
      })
      await problemRunUserCode(runnerDto).then(value => {
        console.log('测试用例正确性验证', value)
      })
    }
  }
}
</script>

<style scoped>

</style>
